<template>
  <Layout style="height: 100%" class="main">
    <Sider
      hide-trigger
      collapsible
      :width="256"
      :collapsed-width="64"
      v-model="collapsed"
      class="left-sider"
      :style="{ overflow: 'hidden' }"
    >
      <side-menu
        accordion
        ref="sideMenu"
        :active-name="activedMenuName"
        :collapsed="collapsed"
        @on-select="turnToPage"
        :menu-list="menuList"
      >
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar
          :collapsed="collapsed"
          @on-coll-change="handleCollapsedChange"
        >
          <user :message-unread-count="unreadCount" :user-avatar="userAvatar" />
          <language
            v-if="$config.useI18n"
            @on-lang-change="setLocal"
            style="margin-right: 10px;"
            :lang="local"
          />
          <!-- <error-store
            v-if="
              $config.plugin['error-store'] &&
                $config.plugin['error-store'].showInHeader
            "
            :has-read="hasReadErrorPage"
            :count="errorCount"
          ></error-store> -->
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;" />
          <div class="backmanager" v-if="isStation">
            <Button
              @click="gotoFront"
              size="small"
              icon="ios-people"
              type="primary"
              >{{$t('_8-eBpJ9i7jv7kCIdS8Sd')}}</Button
            >
            <div class="divide"></div>
          </div>
          <div class="backmanager">
            <Button
              @click="gotoBigScreen"
              size="small"
              icon="ios-desktop"
              type="primary"
              >{{$t('jT4to1ARXoD4w1KrMFQdD')}}</Button
            >
            <div class="divide"></div>
          </div>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <div class="tag-nav-wrapper">
            <tags-nav
              :value="$route"
              @input="handleClick"
              :list="tagNavList"
              @on-close="handleCloseTag"
            />
          </div>
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view />
            </keep-alive>
            <ABackTop
              :height="100"
              :bottom="80"
              :right="50"
              container=".content-wrapper"
            ></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual, expandTree, findItemInTree } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    Language,
    TagsNav,
    Fullscreen,
    ErrorStore,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
      activedMenuName: this.$route.name
    }
  },
  computed: {
    ...mapGetters(['errorCount']),
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    },
    isStation () {
      return this.$store.getters.isStation
    },
    tagNavList () {
      const tagLists = this.$store.state.app.tagNavList || []
      const tree = this.menuList
      const res = []
      tagLists.forEach(t => {
        const item = findItemInTree(t.name, tree)
        const list = { ...t }
        if (item) {
          // 保持标签title和菜单title一致
          list.title = item.title
        }
        res.push(list)
      })
      return res
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvatar () {
      return this.$store.state.user.avatarImgPath
    },
    cacheList () {
      const list = [
        'ParentView',
        ...(this.tagNavList.length
          ? this.tagNavList
            .filter(item => !(item.meta && item.meta.notCache))
            .map(item => item.name)
          : [])
      ]
      return list
      // return []
    },
    menuList () {
      return this.$store.getters.menuList
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag',
      'setEnvi'
    ]),
    ...mapActions(['handleLogin', 'getUnreadMessageCount']),
    activeName () {
      const menus = []
      expandTree(this.menuList, menus)
      const menu = menus.find(m => m.name == this.$route.name)
      if (menu) {
        this.activedMenuName = menu.name
      }
    },
    turnToPage (route) {
      let { name, params, query } = {}
      if (typeof route === 'string') name = route
      else {
        name = route.name
        params = route.params
        query = route.query
      }
      if (name.indexOf('isTurnByHref_') > -1) {
        window.open(name.split('_')[1])
        return
      }
      this.$router.push({
        name,
        params,
        query
      })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.homeName)
        } else {
          if (routeEqual(this.$route, route)) {
            this.tagNavList.length > 1 && this.closeTag(route)
          }
        }
      }
      this.tagNavList.length > 1 && this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    gotoFront () {
      this.$router.push(
        this.$store.getters.isAdmin
          ? { name: 'front_overview' }
          : this.$store.getters.isAgent
            ? { name: 'that_front_overview', params: { id: this.$store.state.user.operatorId } }
            : { name: 'stationOverview', params: { id: this.$store.state.user.stationId } }
      )
    },
    modifyNavName (name, meta) {
      if (name == 'user_query') {
        _.assign(meta, {
          useTitle: (this.isAdmin ? '运营商' : '充电站') + '用户查询'
        })
      }
    },
    gotoBigScreen () {
      let href = ''
      if (this.isStation) {
        const resolved = this.$router.resolve({
          name: 'screen',
          params: { id: this.$store.state.user.stationId }
        })
        href = resolved.href
      } else if (this.isAgent) {
        const resolved = this.$router.resolve({
          name: 'screen-operator',
          params: { id: this.$store.state.user.operatorId }
        })
        href = resolved.href
      } else if (this.isAdmin) {
        const resolved = this.$router.resolve({
          name: 'screen-admin'
        })
        href = resolved.href
      }
      window.open(href)
    }
  },
  watch: {
    $route (newRoute) {
      const { name, query, params, meta } = newRoute
      this.modifyNavName(name, meta)
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      // this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      // this.$refs.sideMenu.updateOpenName(newRoute.name)
      this.activeName()
    }
  },
  created () {
    this.setEnvi('back')
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    // this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
    // 获取未读消息条数
    // this.getUnreadMessageCount()
  }
}
</script>

<style lang="stylus" scoped>
.backmanager
  padding-right 12px
  .divide
    display inline-block
    width 1px
    height 30px
    margin-left 12px
    border-right 2px solid #888
    position relative
    top 12px
</style>
